<!-- 群组 -->
<template>
    <div id='group_container'>
        <!-- 标题盒子 -->
        <div id="title_box">
            <div id="return_icon" @click="returnHadle"><img src="../public/return.png" alt="" srcset=""></div>
            <div>群组列表</div>
            <!-- 添加群组按钮 -->
            <div id="addGroup" title="创建群组" @click="createGroupHandle">
                <img src="../public/group/add.png" alt="" srcset="">
            </div>
        </div>
        <!-- 群组列表 -->
        <div id="group_list">
            <!-- 空列表提示 -->
            <div id="null_group_tips" v-if="nullListFlag">没有加入任何群组-.-</div>
            <!-- 创建群组对话框 -->
            <el-dialog v-model="dialogFormVisible" title="创建群组" width="250">
                <el-form-item label="群名：">
                    <el-input v-model="groupNameIpt" autocomplete="off" />
                </el-form-item>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="execCommit">
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 列表展示 -->
            <div id="group_shows">
                <div class="group_item" v-for="(item, index) of groupInfos" :key="index" @click="toDetailPage(item)">
                    <div class="group_img">
                        <img :src="item.img" alt="群组头像" srcset="">
                    </div>
                    <div class="group_info">
                        <div class="group_name">{{ item.groupName }}</div>
                        <div class="group_number">{{ item.groupNumber }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getLoginUserId, getValueBykey, saveValue } from "../src/indexDB/dbKV"
import axios from "../public/axiosConfig"
import { ElMessage } from 'element-plus'

// 创建表单显示标识
let dialogFormVisible = ref(false);
// 创建表单数据
let groupNameIpt = ref();
// 空列表标识
let nullListFlag = ref(true);
// 群组信息列表
let groupInfos = ref([]);

onMounted(() => {
    // 获取群组列表
    getGroupList()
})

// 获取最新的群组列表
async function getGroupList() {
    // 取到当前登录用户ID
    let loginUserId = await getLoginUserId();
    const { data: res } = await axios.get(`/groupUsers/getGroupList/${loginUserId}`);
    if (res.code == 0) {
        showMessage("info", "没有找到任何群组!")
        nullListFlag.value = true; // 标识为空列表
        return 0;
    }
    nullListFlag.value = false; // 隐藏空列表提示

    // 动态遍历列表给每一个对象赋予一个随机头像
    for (let group of res.data) {
        let imgSrc = await randamGetImg();
        group["img"] = imgSrc;
    }

    // 赋值显示群组列表
    groupInfos.value = res.data;

    // console.log("获取到的用户群组列表：", groupInfos.value);
}

// 进入聊天页面
async function toDetailPage(groupInfo) {
    // 构造chat_receiver对象，存入indexDB，供聊天页面查询聊天记录
    let receiverInfo = { receiverId: groupInfo.groupId, name: groupInfo.groupName, img: groupInfo.img };
    await saveValue("chat_receiver", JSON.stringify(receiverInfo));

    // 页面跳转
    window.location.href = "/details/";
}

// 创建群组按钮触发
function createGroupHandle() {
    // 显示创建表单
    dialogFormVisible.value = true;
}

// 创建群组，执行提交
async function execCommit() {
    // 获取当前登录用户ID
    let loginUserId = await getLoginUserId();
    // 构造请求参数对象，发送创建请求
    let paramObj = { groupName: groupNameIpt.value, groupOwner: loginUserId };
    const { data: res } = await axios.post("/groupInfos/createGroup", paramObj);
    if (res.code == 1) {
        showMessage("success", res.data)
        dialogFormVisible.value = false; // 隐藏表单
        // 刷新，重载群组数据
        getGroupList();
        return 1;
    }

    showMessage("error", "创建失败!")

}

// 随机获取一张头像 
async function randamGetImg() {
    let imgs = await getValueBykey("myPictures");
    let randomIndex = Math.floor(Math.random() * imgs.length);
    return imgs[randomIndex];
}

// 通用消息提示函数
function showMessage(messageType, messageText) {
    ElMessage({
        message: messageText,
        type: messageType,
    })
}

// 返回上一页
function returnHadle() {
    window.history.back();
}

</script>
<style scoped>
#title_box {
    max-width: 700px;
    font-size: 17px;
    box-sizing: border-box;
    background-color: #d7e5ee;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}

#return_icon {
    position: absolute;
    left: 7px;
    top: 15px;
}

#return_icon img {
    width: 22px;
}

#addGroup {
    position: absolute;
    right: 15px;
    top: 15px;
}

#addGroup img {
    width: 22px;
}

#group_list {
    margin-top: 60px;
    position: relative;
}

#null_group_tips {
    color: #676767;
    font-size: 14px;
}

.group_item {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.group_info {
    padding-left: 10px;
    font-size: 15px;
}

.group_img img {
    width: 46px;
    border-radius: 10px;
}

.group_name {
    font-weight: 600;
}

.group_number {
    font-size: 13px;
    color: #535353;
    padding-top: 5px;
}
</style>